<template>
	<view class="content">
		<view class="main">
			<!-- 头像和姓名卡片 -->
			<view class="profile-card elevation">
				<view class="profile-content">
					<image src="/static/icons/tou.png" class="avatar"></image>
					<view class="profile-info">
						<text class="username">爱骑行的小G</text>
					</view>
				</view>
				<view class="profile-stats">
					<view class="stat-item">
						<text class="stat-value">{{days}}</text>
						<text class="stat-label">骑行天数</text>
					</view>
					<view class="stat-item">
						<text class="stat-value">{{totalDistance}}</text>
						<text class="stat-label">总里程(km)</text> 
					</view>
				</view>
			</view>
			
			<!-- 身体数据卡片 -->
			<view class="data-card elevation">
				<view class="card-header">
					<text class="card-title">身体数据</text>
					<text class="card-subtitle">保持健康 · 科学骑行</text>
				</view>
				
				<view class="body-data-grid">
					<view class="data-item">
						<view class="data-icon-bg" style="background-color: #e3f2fd;">
							<image src="/static/icons/height.png" class="data-icon"></image>
						</view>
						<text class="data-label">身高 (cm)</text>
						<input 
							class="data-input" 
							type="number" 
							v-model="userHeight" 
							placeholder="请输入身高"
						/>
					</view>
					
					<view class="data-item">
						<view class="data-icon-bg" style="background-color: #e8f5e9;">
							<image src="/static/icons/weight.png" class="data-icon"></image>
						</view>
						<text class="data-label">体重 (kg)</text>
						<input 
							class="data-input" 
							type="number" 
							v-model="userWeight" 
							placeholder="请输入体重"
						/>
					</view>
				</view>
				
				<view class="bmi-display" v-if="userHeight && userWeight">
					<text class="bmi-label">您的BMI指数</text>
					<text class="bmi-value">{{calculateBMI}}</text>
					<text class="bmi-status">{{bmiStatus}}</text>
				</view>
			</view>
			
			<!-- 骑行统计卡片 -->
			<view class="stats-card elevation"> 
				<view class="card-header">
					<text class="card-title">骑行统计</text>
					<text class="card-subtitle">记录成就 · 挑战自我</text>
				</view>
				
				<view class="cycling-stats">
					<view class="stat-large">
						<text class="stat-large-value">{{formatTime(totalRidingTime)}}</text>
						<text class="stat-large-label">总骑行时间</text>
					</view>
					
					<view class="stats-details">
						<view class="stat-detail-item">
							<view class="detail-icon-container">
								<image src="/static/icons/total.png" class="detail-icon"></image>
							</view>
							<view class="detail-info">
								<text class="detail-value">{{totalDistance}} km</text>
								<text class="detail-label">总距离</text>
							</view>
						</view>
						
						<view class="stat-detail-item">
							<view class="detail-icon-container">
								<image src="/static/icons/avg.png" class="detail-icon"></image>
							</view>
							<view class="detail-info">
								<text class="detail-value">{{avgSpeed}} km/h</text>
								<text class="detail-label">平均速度</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 卡路里图表 -->
			<ucharts
			  :title="title"
			  :subtitle="subtitle"
			  type=0
			  :categories="timeData"
			  :seriesData="chartData"
			  ref="uchart"
			/> 
			<view style="width: 280rpx;display: flex;margin-top: -260px;margin-left: 200px;">
				<u-button class="chart-btn" @click="typeChange(0)">小时数</u-button>
				<u-button class="chart-btn" @click="typeChange(1)">卡路里</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userHeight: 175,
				userWeight: 68,
				totalRidingTime: 0, // 单位：分钟
				totalDistance: 28,
				avgSpeed: 0,
				days:0,
				kaluli:[],
				timeData:['上上上周','上上周','上周','本周'],
				flag:1
			}
		},
		computed: {
			calculateBMI() {
				if (!this.userHeight || !this.userWeight) return 0;
				const heightInM = this.userHeight / 100;
				return (this.userWeight / (heightInM * heightInM)).toFixed(1);
			},
			bmiStatus() {
				const bmi = this.calculateBMI;
				if (bmi < 18.5) return "偏瘦";
				if (bmi >= 18.5 && bmi < 24) return "正常";
				if (bmi >= 24 && bmi < 28) return "超重";
				return "肥胖";
			},
			chartData(){
				if(this.flag === 1){
					return ['1058','880','1220','645']
				}else{
					return this.kaluli.map(item => item.hour_count)
				}
			},
			title(){
				if(this.flag === 1){
					return '最近一月每周卡路里趋势图'
				}else{
					return '最近一月每周骑行时间'
				}
			},
			subtitle(){
				if(this.flag === 1){
					return '单位：cal'
				}else{
					return '单位：h'
				}
			}
		},
		onShow(){
			this.sendWs()
		},
		methods: {
			typeChange(type){
				console.log(type)
				this.flag = type
				console.log(this.chartData)
			},
			formatTime(minutes) {
				const hours = Math.floor(minutes / 60);
				const mins = minutes % 60;
				return `${hours}小时${mins}分钟`;
			},
			sendWs(){
				let url = this.$wsUrl + '/me'
				const ws = uni.connectSocket({
					url:url,
					success(){
							console.log(url + ' 连接成功')
					},
					fail(){
						console.log(url + ' 连接失败')
					}
				})
				ws.onMessage((res)=>{
					let data = JSON.parse(res.data)
					console.log(data.minutes)
					this.totalRidingTime = data.minutes
					this.avgSpeed = data.qxsd_avg.toFixed(2)
					this.days = data.days
					this.kaluli = data.kaluli
					if(this.$refs.uchart){
						this.$refs.uchart.isDataReady = true;
					}
					ws.close({
						success(){
							console.log(url + ' 关闭成功')
						},
						fail(){
							console.log(url + ' 关闭失败')
						}
					})
				})
			}
		}
	}
</script>

<style scoped>
	@import '../../css/index_data.css';
	@import '../../css/index_device.css';
	
	.content {
		width: 100%;
		display: flex;
		justify-content: center;
		padding: 20rpx;
		box-sizing: border-box;
		background: linear-gradient(to bottom, #f5f7fa 0%, #e4e8eb 100%);
		min-height: 100vh;
	}
	 
	.main {
		width: 100%;
		max-width: 710rpx;
		display: flex;
		flex-direction: column;
		gap: 24rpx;
		padding-bottom: 40rpx;
	}
	
	/* 个人信息卡片 */
	.profile-card {
		width: 100%;
		background: white;
		border-radius: 24rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-top: 20rpx;
	}
	
	.profile-content {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
	}
	
	.avatar {
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		border: 4rpx solid #f0f0f0;
	}
	
	.profile-info {
		display: flex;
		flex-direction: column;
	}
	
	.username {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 8rpx;
	}
	
	.user-id {
		font-size: 24rpx;
		color: #999;
	}
	
	.profile-stats {
		display: flex;
		justify-content: space-around;
		border-top: 1rpx solid #f5f5f5;
		padding-top: 25rpx;
	}
	
	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.stat-value {
		font-size: 32rpx;
		font-weight: 700;
		color: #2196F3;
		margin-bottom: 6rpx;
	}
	
	.stat-label {
		font-size: 24rpx;
		color: #666;
	}
	
	/* 身体数据卡片 */
	.body-data-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin-top: 20rpx;
	}
	
	.data-input {
		width: 100%;
		height: 80rpx;
		border: 1rpx solid #ddd;
		border-radius: 12rpx;
		padding: 0 20rpx;
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		text-align: center;
		margin-top: 15rpx;
		box-sizing: border-box;
	}
	
	.bmi-display {
		margin-top: 30rpx;
		padding-top: 25rpx;
		border-top: 1rpx solid #f5f5f5;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.bmi-label {
		font-size: 26rpx;
		color: #666;
		margin-bottom: 10rpx;
	}
	
	.bmi-value {
		font-size: 42rpx;
		font-weight: 700;
		color: #4CAF50;
		margin-bottom: 8rpx;
	}
	
	.bmi-status {
		font-size: 24rpx;
		color: #4CAF50;
		padding: 6rpx 16rpx;
		background-color: #E8F5E9;
		border-radius: 20rpx;
	}
	
	/* 统计卡片 */
	.stats-card {
		width: 100%;
		background: white;
		border-radius: 24rpx;
		padding: 30rpx;
		box-sizing: border-box;
		margin-bottom: 10px; 
	}
	
	.cycling-stats {
		margin-top: 20rpx;
	}
	
	.stat-large {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-bottom: 30rpx;
		padding-bottom: 25rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}
	
	.stat-large-value {
		font-size: 48rpx;
		font-weight: 700;
		color: #2196F3;
		margin-bottom: 10rpx;
	}
	
	.stat-large-label {
		font-size: 26rpx;
		color: #666;
	}
	
	.stats-details {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}
	
	.stat-detail-item {
		display: flex;
		align-items: center;
	}
	
	.detail-icon-container {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #E3F2FD;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-right: 20rpx;
	}
	
	.detail-icon {
		width: 40rpx;
		height: 40rpx;
	}
	
	.detail-info {
		flex: 1;
	}
	
	.detail-value {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 4rpx;
	}
	
	.detail-label {
		font-size: 24rpx;
		color: #999;
	}
	
	/* 成就卡片 */
	.achievement-card {
		width: 100%;
		background: white;
		border-radius: 24rpx;
		padding: 30rpx;
		box-sizing: border-box;
	}
	
	.achievements-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20rpx;
		margin-top: 20rpx;
	}
	
	.achievement-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
		background-color: #f9f9f9;
		border-radius: 16rpx;
	}
	
	.achievement-icon {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		background-color: #FFF8E1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin-bottom: 15rpx;
	}
	
	.achievement-icon.locked {
		background-color: #f5f5f5;
	}
	
	.achievement-image {
		width: 40rpx;
		height: 40rpx;
	}
	
	.achievement-name {
		font-size: 26rpx;
		font-weight: 600;
		color: #333;
		margin-bottom: 8rpx;
		text-align: center;
	}
	
	.achievement-desc {
		font-size: 22rpx;
		color: #999;
		text-align: center;
	}
	
	.elevation {
		box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.05);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
	}
	
	.elevation:active {
		transform: translateY(-4rpx);
		box-shadow: 0 8rpx 24rpx rgba(0,0,0,0.1);
	}
	.chart-btn{
		flex:1;
		font-size:12px;
		height: 40px;
		line-height: 40px; 
	}
	.chart-btn:active{
		background-color: lightblue;
	}
</style>